<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:jsf="http://xmlns.jcp.org/jsf">
    <head jsf:id="head">     
        <title>Event Details</title>
        <link href="css/meteocal.css" rel="stylesheet" type="text/css"/>
    </head>
    <body jsf:id="body" class="noFrame">   
        <!--Element of the first line on the top bar-->
        <div id="topHeader">
             <img id="logo" src="Images/meteocalsnow.png"  name="meteocalLogo" title="meteocallogo"/>

                <h1 id="userCalendar">#{loginBean.loggedUser.username}'s Calendar</h1>   
              
            <div class="logoutForm">         
                <h:form>
                    <p:commandButton value="Logout" action="#{loginBean.logout()}"/>                     
                </h:form>
            </div>
        </div>
        
        <div id="searchHeader">
            <h:form id="search">
                <p:inputText id="searchText" value="#{SearchController.searchedUser}" />
                <p:commandButton id="searchButton" value="Search"  action="#{SearchController.searchUser()}"/>    
            </h:form>   
        </div>
        
        <div id="LeftHeader">
            <ul class="buttonList">
                <li><p:commandButton class="leftBarButton"  value="Home" action="#{scheduleController.loadOwnCalendar()}"/></li>   
                <li><p:commandButton class="leftBarButton"  value="AddEvent" action="#{EventController.newEvent}"/></li>       
                <li><p:button  class="leftBarButton"  value="Notifications" outcome="notifications"/></li>   
                <li><p:button class="leftBarButton"  value="Settings" outcome="settings"/> </li>     

            </ul>

        </div>

        <h:form id="Event">
            <div id="eventForm">

                <h1> Event #{showEventController.selectedEvent.title}</h1>

                <!-- copied -->
                <h:panelGrid columns="2"  cellpadding="10px" width="450px"> 
                    <p:outputLabel for="title" value="Title:"/>
                    <h:outputText id="title" value="#{showEventController.selectedEvent.title}" />

                    <p:outputLabel for="location" value="Location" />          
                    <h:outputText id="location" value="#{showEventController.selectedEvent.location}"  />

                    <p:outputLabel for="city" value="City:"/>
                    <h:outputText id="city" value="#{showEventController.selectedEvent.city}"/>

                    <p:outputLabel for="startingDate" value="Starting Date:" />
                    <h:outputText id="startingDate" value="#{showEventController.date}" />

                    <p:outputLabel for="startingTime" value="Starting Time:" />
                    <h:outputText id="startingTime" value="#{showEventController.startingTime}" />

                    <p:outputLabel for="endingTime" value="Ending Time:" />
                    <h:outputText id="endingTime" value="#{showEventController.endingTime}"/>

                    <p:outputLabel for="color" value="Color Type:"/>
                    <h:outputText id="color" value="#{showEventController.selectedEvent.color}" style="width:100px"/>

                    <p:outputLabel for="privacy" value="Set Event Privacy to:"/>
                    <h:outputText id="privacy" value="#{showEventController.selectedEvent.privacy}" style="width:100px"/>
                    
                    <p:outputLabel for="description" value="Description :"/>
                    <p:inputTextarea class="notResize, noBackround"  readonly="true" maxlength="1000"  id="description"   autoResize="false" rows="5" cols="27" value="#{showEventController.selectedEvent.description}"    />
                    
                </h:panelGrid>
                <br />

                <div id="badConditionsDiv" style="display: #{showEventController.hasBadCondition()}">
                    <!-- bad weather layer -->
                    <h:panelGrid  cellpadding="20px" width="450px" columns="2">
                        <p:outputLabel for="layer" value="Layer Type:"/>
                        <h:outputText id="layer" value="#{showEventController.badConditions.layer}" style="width:100px"/>       

                        <h:outputText value="Temperature :"/>
                        <h:outputText id="temperatureoutput" value="#{showEventController.badConditions.temperature} C" />

                        <h:outputText value="Precipitations :"/>
                        <h:outputText id="precipitationsoutput" value="#{showEventController.badConditions.precipitations} mm" />

                    </h:panelGrid>
                </div>

                <p:commandButton value="Show participants" actionListener="#{showEventController.loadParticipants()}"/>
                <p:dialog id="participants" widgetVar="participants" resizable="false" header="Participants" onShow="updateDialog()">
                    <p:remoteCommand name="updateDialog" update="table"/>
                    <p:dataTable id="table" var="participant" value="#{showEventController.participants}" rows="10"
                                 paginator="true"
                                 paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                                 rowsPerPageTemplate="5">
                        <p:column headerText="Username">                        
                            <h:outputText id="text1" value="#{participant.participantPK.user}"/>
                        </p:column>
                        <p:column headerText="Response">                        
                            <h:outputText id="text2" value="#{participant.participant}"/>
                        </p:column>
                    </p:dataTable>  
                </p:dialog>
                <br />
                <br />
                <br />

                <p:outputLabel id="participantText" value="    You have been invited to this event by  #{showEventController.creator.username}; you currently have response #{showEventController.getResponse()}. 
                               " rendered="#{showEventController.isInvited()}" />
                <br />
                <p:commandButton value="Participate" rendered="#{showEventController.isInvited()}" ajax="true" update="participantText" actionListener="#{showEventController.setInvited('YES')}" />
                <p:commandButton   value="Decline" rendered="#{showEventController.isInvited()}" ajax="true" update="participantText" actionListener="#{showEventController.setInvited('NO')}" />                 
            

            </div>

            <div id="rightEventForm" >
                <h1 class="weatherPreview"> Weather Preview</h1>
                
                <p:outputLabel value="The weather preview is not available" rendered="#{showEventController.isWeatherNull}"/>
                <p:panel rendered="#{!showEventController.isWeatherNull}" style="border: none; background: none;">
                    <h:panelGrid columns="3" cellpadding="10px" class="weatherGrid"  >
                        <p:outputLabel value="#{showEventController.city}"/>
                        <h:outputText id="temperature" value="#{showEventController.temperature} C" style="width:100px" />
                        <img id="weatherImage" src="#{showEventController.weatherImage}"  name="weatherImage"  />
                    </h:panelGrid>

                    <p:chart type="line" model="#{showEventController.multiAxisModel}" style="height:400px; width:470px "/>

                    <h:panelGrid columns="2" cellpadding="10px" class="weatherGrid" > 
                        <p:outputLabel for="wind" value="Wind speed:"/>
                        <h:outputText id="wind" value="#{showEventController.wind}" />

                        <p:outputLabel for="humidity" value="Humidity:"/>
                        <h:outputText id="humidity" value="#{showEventController.humidity}" style="width:100px"/>

                        <p:outputLabel for="clouds" value="Clouds:"/>
                        <h:outputText id="clouds" value="#{showEventController.clouds}%" style="width:100px"/>

                        <p:outputLabel for="precipitations" value="Precipitations:"/>
                        <h:outputText id="precipitations" value="#{showEventController.precipitations}mm" style="width:100px"/>

                        <p:outputLabel for="precipitationsType" value="Precipitations Type:"/>
                        <h:outputText id="precipitationsType" value="#{showEventController.precipitationType}" style="width:100px"/>                 
                    </h:panelGrid>
                </p:panel>

            </div> 
        </h:form>
        
        <!-- dialog error -->
                
        <p:dialog header="Error" widgetVar="EventInTheMiddle Error" minHeight="40" resizable="false" >
        <h:outputText value="You have some event in the middle of the one you want to participate" />
        </p:dialog>
        

    </body>
</html>

